<template>
  <div ref="canvasContainer"></div>
</template>

<script lang="ts"">
import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh, AxesHelper} from 'three';
import { OrbitControls } from 'three/examples/jsm/Addons.js';
import { GUI }  from 'three/examples/jsm/libs/lil-gui.module.min.js';
import { step } from 'three/webgpu';
import { min } from 'three/webgpu';





export default defineComponent({
  setup() {
    const canvasContainer = ref();
    let scene: any, camera: any, renderer: any, cube: any, controls: any, gui: any;
    let colorParms = {
      color: 0x00ff00,
    }
    onMounted(async() => {
      initThree()
      SetCameraSite()
      createCube()
      control()
      startAnimationLoop()
      Gui_Control()
      // 监听窗口变化
      window.addEventListener('resize', () => {
        // 重新设置画布大小
        renderer.setSize(getWindowWidth(), getWindowHeight());
        // 更新相机的视锥体的长宽比
        camera.aspect = getWindowWidth() / getWindowHeight();
        camera.updateProjectionMatrix();
      })
    });


    // 创建场景
    const initThree = async() => {
      scene = new Scene();
      camera = new PerspectiveCamera(75, getWindowWidth() / getWindowHeight(), 0.1, 1000);
      renderer = new WebGLRenderer();
      renderer.setSize(getWindowWidth(), getWindowHeight());
      canvasContainer.value.appendChild(renderer.domElement)
    };


    // 创建几何体，材质，网格
    const createCube = async() => {
      const geometry = new BoxGeometry(1, 1, 1);
      const material = new MeshBasicMaterial({ color: 0x00ff00 });
      cube = new Mesh(geometry, material);
      // cube.position.set(2, 0, 0); // 物体移动
      cube.rotation.x = Math.PI / 4;
      scene.add(cube);
    };


    // 设置相机位置
    const SetCameraSite = async() => {
      camera.position.z = 5;
      camera.position.y = 2;
      camera.position.x = 2;
      camera.lookAt(0, 0, 0);
    };


    // 添加世界坐标, 轨道控制器
    const control = async() => {
      const axesHelper = new AxesHelper(5);
      scene.add(axesHelper);
      controls = new OrbitControls(camera, renderer.domElement);
      // 启用阻尼
      controls.enableDamping = true;
      controls.dampingFactor = 0.05;
      controls.autoRotate = true;
    }


    // 渲染函数
    const startAnimationLoop = async() => {
      controls.update();
      requestAnimationFrame(startAnimationLoop);
      // 几何体旋转
      // cube.rotation.x += 0.01;
      // cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };


    const getWindowWidth = () => {
      if (typeof window !== 'undefined') {
        return window.innerWidth;
      }
      return 0;
    };

    const getWindowHeight = () => {
      if (typeof window !== 'undefined') {
        return window.innerHeight;
      }
      return 0;
    };


    const gui_control =  {
      FullScreen: function() {
        if (!document.fullscreenElement) {
          document.documentElement.requestFullscreen();
        }
        else {
          alert("当前是全屏")
        }
      },
      ExitScreen: function() {
        if (document.fullscreenElement) {
          document.exitFullscreen();
        }
        else {
          alert("当前不是全屏")
        }
      }
    }


    const Gui_Control = async() => {
      gui = new GUI();
      gui.add(gui_control, 'FullScreen').name('全屏');
      gui.add(gui_control, 'ExitScreen').name('退出全屏');
      let folder = gui.addFolder('物体位置');
      folder.add(cube.position, 'x', -10,10).name('X轴').onFinishChange ((value: any) => {
        console.log('X轴位置改变:', value);
      });
      folder.add(cube.position, 'y', -10,10).name('Y轴');
      folder.add(cube.position, 'z', -10,10).name('Z轴');
      gui.addColor(colorParms, 'color').name('颜色').onChange((value: any) => {
        cube.material.color.set(value);
      });
    }

    return {
      canvasContainer,
    };
  },
});
</script>
